<template>
    <div class="container">
        <el-button class="btn-add" size="mini" type="primary" @click="openDialog(0)">添加权限</el-button>
        <el-table
            row-key="id"
            :data="tableList">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="code" label="标识"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button size="mini" type="text" @click="openDialog(1, scope.row.id)" v-if="scope.row.type === 1">添加</el-button>
                    <el-button size="mini" type="text" @click="openDialog(2, scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            :title="dialogType === 2 ? '修改' : '新增'"
            :visible.sync="showDialog"
            width="40%"
            :before-close="closeDialog">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="权限标识" prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="权限描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="开启">
                    <el-switch
                        v-model="form.enVisible"
                        active-value="1"
                        inactive-value="0"
                        active-color="#2752FB"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeDialog">取 消</el-button>
                <el-button size="mini" type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getPermissionList, addPermission, delPermission, getPermissionItem, editPermission } from '@/api/permission'
import { arrToTree } from '@/utils/arrToTree'

export default {
    name: 'Permission',
    created () {
        this.render()
    },
    data () {
        return {
            tableList: [],
            showDialog: false,
            dialogType: 0,
            form: {},
            rules: {
                name: [
                    { required: true, message: '请输入', trigger: 'blur'}
                ],
                code: [
                    { required: true, message: '请输入', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        async render () {
            const res = await getPermissionList()
            this.tableList = arrToTree(res.data.data, 0)
            console.log(this.tableList)
        },
        async openDialog (type, id) {
            this.dialogType = type
            this.showDialog = true
            this.form.pid = id
            this.form.type = 2

            if (type === 2) {
                const res = await getPermissionItem(id)
                this.form = res.data.data
            }
        },
        closeDialog () {
            this.form = {}
            this.showDialog = false
        },
        submit () {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    if (this.dialogType === 0) {
                        this.form.type = 1
                        this.form.pid = 0
                    }
                    let res = ''
                    if (this.dialogType !== 2) {
                        res = await addPermission(this.form)
                    } else {
                        console.log(this.form)
                        res = await editPermission(this.form.id, this.form)
                    }
                    if (res.data.success) {
                        await this.render()
                        this.showDialog = false
                    }
                    this.form = {}
                }
            })
        },
        async del (id) {
            const flag = await this.$confirm('确定删除？')
            if (flag) {
                await delPermission(id)
                await this.render()
            }
        }
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 8px;

    .btn-add {
        margin-bottom: 8px;
    }
}

</style>
